<template>
  <div>
    <div class="swiper">

    </div>
    <div class="content">
      <div class="select">
        <div @click="filters('id')" :class="{active: sort === 'id'}">综合</div>
        <div @click="filters('retail_price')" :class="{active: sort === 'retail_price'}">
          <span>价格</span>
          <h1>
            <h6><i-icon size="16" :color="sortType === 'desc' && sort === 'retail_price' ? '#b4282d' : '#000'" type="packup" /></h6>
            <h6><i-icon size="16" :color="sortType === 'asc' && sort === 'retail_price' ? '#b4282d' : '#000'" type="unfold" /></h6>
          </h1>
        </div>
        <div @click="filters('category_id')" :class="{active: sort === 'category_id'}">分类</div>
      </div>
    </div>
    <div class="goodsList">
      <v-goods :goods="goods" :key="index" v-for="(goods,index) in goodsList"></v-goods>
    </div>
     <v-more :isMore="isMore"></v-more>
  </div>
</template>

<script>
import {get} from '@/utils'
import vGoods from '@/components/goods'
import vMore from '@/components/more'

export default {
  data () {
    return {
      type: '',
      sort: '',
      page: 0,
      pageSize: 10,
      goodsList: [],
      sortType: 'asc',
      isMore: false
    }
  },
  mounted () {
    const {type} = this.$root.$mp.query
    this.type = type
    this.sort = 'id'
    this.getData()
  },
  methods: {
    async getData () {
      const res = await get('/weapp/filters', {
        type: this.type,
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sort,
        sortType: this.sortType
      })
      if (res.goodsList.length < 10) {
        this.isMore = true
      }
      this.goodsList = this.goodsList.concat(res.goodsList)
      wx.hideLoading()
    },
    async filters (sort) {
      if (sort === this.sort && sort !== 'retail_price') return
      this.isMore = false
      this.goodsList = []
      this.sort = sort
      this.page = 0
      if (sort === 'retail_price') {
        if (this.sortType === 'asc') {
          this.sortType = 'desc'
        } else {
          this.sortType = 'asc'
        }
      } else {
        this.sortType = 'asc'
      }
      this.getData()
    }
  },
  onReachBottom () {
    if (this.isMore) return
    this.page = this.page + 1
    wx.showLoading({
      title: '加载中'
    })
    this.getData()
  },
  components: {
    vGoods,
    vMore
  }
}
</script>

<style lang="less" scoped>
.select{
  background: #fff;
  border-bottom: 1rpx solid #d9d9d9;
  // position: fixed;
  display: flex;
  div{
    flex: 1;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: center ;
    h1{
      display: inline-block;
      position: relative;
      h6{
        position: absolute;
        font-weight: bold;
        &:first-of-type{
          top: -8rpx;
          left: 0;
        }
        &:last-of-type{
          top: 8rpx;
          left: 0;
        }
      }
    }
  }
}
.goodsList{
  width: calc(100% - 10rpx);
  padding: 0 5rpx;
  background-color: #f3f5f7;
}
.active{
  color: #b4282d;
}
</style>
